import React, { Suspense } from 'react'
import {BrowserRouter,HashRouter,Route,Routes,Navigate} from 'react-router-dom'
import routesList from './RouterConfig'
import { RouterItem } from '../utils/type'
interface Props {
      
}

const RouterView = (props: Props) => {
    const {mode,routes}=routesList
    const renderRoutes=(arr:RouterItem[])=>{
        return arr.map((item,index)=>{
            return <Route key={index}
            path={item.path}
            element={item.to?<Navigate to={item.to}></Navigate>:<item.element></item.element>}>
                {
                    item.children && renderRoutes(item.children)
                }
            </Route>
        })
    }
    return (
        <div>
            <Suspense fallback={<div>路由加载中</div>}>
              {
                mode==='history'?
                  <BrowserRouter>
                 <Routes>
                    {
                        renderRoutes(routes)
                    }
                 </Routes>
                </BrowserRouter>:<HashRouter>
                    {
                        renderRoutes(routes)
                    }
                </HashRouter>
              }
            </Suspense>
        </div>
    )
}

export default RouterView


